<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"/>

    <title>Service UI Fragment</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>

<body>
<main class="container mt-3 mb-3" role="main">
    <div class="mb-4" id="serviceui" th:fragment="serviceUI" th:if="${registeredService}">
        <div class="d-flex align-items-center p-2" th:if="${serviceUIMetadata}">
            <img th:alt="${serviceUIMetadata.displayName}" th:height="${serviceUIMetadata.logoHeight}"
                 th:if="${serviceUIMetadata.logoUrl}" th:src="${serviceUIMetadata.logoUrl}"
                 th:title="${serviceUIMetadata.displayName}" th:width="${serviceUIMetadata.logoWidth}"/>

            <img th:alt="${serviceUIMetadata.displayName}" th:height="${serviceUIMetadata.logoHeight}"
                 th:src="@{images/webapp.png}" th:title="${serviceUIMetadata.displayName}"
                 th:unless="${serviceUIMetadata.logoUrl}" th:width="${serviceUIMetadata.logoWidth}"/>
            <div class="ml-2">
                <h2 th:text="${serviceUIMetadata.displayName}">serviceUIMetadata.displayName</h2>
                <p th:text="${serviceUIMetadata.description}">serviceUIMetadata.description</p>

                <p th:if="${serviceUIMetadata.informationURL}"
                   th:utext="#{screen.mdui.infolink.text(${serviceUIMetadata.informationURL})}">
                    screen.mdui.infolink.text</p>
                <p th:if="${serviceUIMetadata.privacyStatementURL}"
                   th:utext="#{screen.mdui.privacylink.text(${serviceUIMetadata.privacyStatementURL})}">
                    serviceUIMetadata.privacyStatementURL</p>
            </div>
        </div>

        <div class="d-flex align-items-center p-2" th:unless="${serviceUIMetadata}">
            <img th:src="${registeredService.logo} ? ${registeredService.logo} : @{'images/webapp.png'}"/>
            <div class="ml-2" id="servicedesc">
                <h5 th:text="${registeredService.name}">Registered Service Name</h5>
                <p th:text="${registeredService.description}">Registered Service Description</p>
            </div>
        </div>
    </div>
</main>
</body>

</html>